<template>
  <el-table :data="list" style="width: 100%">
    <!-- <el-table-column prop="no" label="记录编码" align="center" /> -->
    <el-table-column prop="nickName" label="用户昵称" align="center" />
    <el-table-column prop="totalPrice" label="订单金额(元)" align="center" />
    <el-table-column prop="title" label="订单来源" align="center">
      <template #default="scope">
        <dict-tag :type="DICT_TYPE.BIZ_TYPE" :value="scope.row.bizType" />
      </template>
    </el-table-column>
    <el-table-column prop="price" label="佣金金额(元)" align="center" />
    <el-table-column
      prop="createTime"
      label="结算时间(元)"
      :formatter="dateFormatter"
      align="center"
    />
  </el-table>
  <!-- 分页 -->
  <Pagination
    :total="total"
    v-model:page="queryParams.pageNo"
    v-model:limit="queryParams.pageSize"
    @pagination="getList"
    small
  />
</template>
<script setup lang="ts">
import { DICT_TYPE } from '@/utils/dict'
import { dateFormatter } from '@/utils/formatTime'
import * as BrokerageRecordApi from '@/api/blind/brokerageRecord'

const total = ref(0) // 列表的总页数
const list = ref([]) // 列表的数据
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  userId: undefined
})

const { userId } = defineProps<{ userId: number }>()

/** 查询列表 */
const getList = async () => {
  queryParams.userId = userId
  const dataList = await BrokerageRecordApi.getBrokerageWithdrawPage(queryParams)
  list.value = dataList.list
  total.value = 2
  // total.value = dataList.total
}

onMounted(async () => {
  getList()
})
</script>
<style scoped lang="scss">
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
